<template>
  <div class="com-container">
    <div class="com-chart" ref="chart_ref"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      man: require('../../public/static/img/man.png'), // 男性底图
      woman: require('../../public/static/img/woman.png'), // 女性底图
      chartInstance: null, // echart实例
      allData: null // 服务器返回的数据
    }
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    // 在页面加载完成的时候，主动进行屏幕的适配
    this.screenAdapter()
  },
  destroyed() {
    // 在组件销毁的时候需要把监听器取消掉，防止内存的泄露
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    // 初始化echartInstance对象
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.chart_ref)
      // 对图表初始化配置的控制
      const initOption = {
        tooltip: {
          trigger: 'item'
        },
        // graphic: {
        //   elements: [
        //     {
        //       type: 'image',
        //       z: 3,
        //       style: {
        //         image: this.man,
        //         width: 20,
        //         height: 40
        //       },
        //       left: '43%',
        //       top: 'center'
        //     },
        //     {
        //       type: 'image',
        //       z: 3,
        //       style: {
        //         image: this.woman,
        //         width: 20,
        //         height: 40
        //       },
        //       right: '43%',
        //       top: 'center'
        //     }
        //   ]
        // },
        color: ['#ff40a7', '#6759ff'],
        legend: {
          bottom: '5%',
          left: 'center',
          icon: 'circle',
          orient: 'vertical',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['30%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true
              }
            },
            labelLine: {
              show: false
            }
          }
        ]
      }
      this.chartInstance.setOption(initOption)
    },
    // 获取服务器数据
    getData() {
      const data = [
        { value: 1048, name: '固定场所' },
        { value: 735, name: '寺庙教堂' }
      ]
      this.allData = data
      this.updateChart()
    },
    // 更新图表
    updateChart() {
      const seriesArr = this.allData.map((item) => {
        return {
          name: item.name,
          value: item.value
        }
      })
      const dataoption = {
        label: { // 标签文字设置
          show: true,
          position: 'center',
          formatter: '{b}：{c}\n\n占比{d}%'
        },
        series: {
          data: seriesArr,
          tooltip: {
            formatter: '{b}：{c}\n\n占比：{d}%'
          }
        }
      }
      this.chartInstance.setOption(dataoption)
    },
    // 当浏览器大小发生变化的时候，会调用该方法来适配屏幕
    screenAdapter() {
      const titleFontSize = this.$refs.chart_ref.offsetWidth / 100 * 3.6 // 这个比例比较合适
      // 和分辨率大小相关的配置项
      const adapterOption = {
        legend: {
          itemWidth: titleFontSize,
          itemHeight: titleFontSize,
          itemGap: titleFontSize / 2, // 图例间隔
          textStyle: {
            fontSize: titleFontSize
          }
        },
        series: [
          {
            radius: [titleFontSize * 3, titleFontSize * 5] // 设置饼图半径
          }
        ]
      }
      this.chartInstance.setOption(adapterOption)
      // 需要手动调用图表对象的resize方法才能产生效果
      this.chartInstance.resize()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
